<template>
    <div class="product-page">
        <div class="product-card">
            <!-- 左侧图片 -->
            <div class="left">
                <img :src="'http://192.168.144.183:9090/easybuyImages/' + product.fileName" alt="商品图" />
            </div>

            <!-- 右侧信息 -->
            <div class="right">
                <h2 class="title">{{ product.name }}</h2>
                <p class="price">劲爆价：¥ {{ product.price }}</p>
                <p class="desc">描述：{{ product.description }}</p>

                <!-- 数量选择 -->
                <div class="quantity-box">
                    <button @click="changeQty(-1)">－</button>
                    <input type="number" v-model.number="qty" min="1" @input="changenum()" />
                    <button @click="changeQty(1)">＋</button>
                    <!-- <span class="stock-tips">当前最多{{ product.stock }}添加数量</span> -->
                </div>

                <!-- 操作按钮 -->
                <div class="action-bar">
                    <button class="btn-fav" @click.prevent="checkIsCollect()">加入收藏</button>
                    <button class="btn-cart" @click.prevent="getBuyCar()">加入购物车</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ProductDetialShow',
    data() {
        return {
            id: 0,
            qty: 1,
            userId: '',        // 购买数量
            product: null,
            buyCar: null
        }
    },
    methods: {
        changenum() {
            this.qty = Math.max(parseInt(this.qty) || 1, 1)
        },
        getProduct() {
            this.$axios({
                url: '/selectProductById',
                method: 'get',
                params: { id: this.id }
            }).then(rs => {
                this.product = rs.data.product
            })
        },
        changeQty(step) {
            const newVal = this.qty + step
            if (newVal >= 1) this.qty = newVal
        },
        addCollect() {

            this.$axios({
                url: 'addCollect',
                method: 'post',
                data: { userId: this.userId, product: this.product },
                headers: { 'content-type': 'application/json' }
            }).then(rs => {
                if (rs.data.code == 5200 || rs.data.code == '5200') {
                    alert('添加成功！')

                } else {
                    alert('添加失败')
                }
            })
        },

        addToBuyCar() {
            if (this.buyCar == null || this.buyCar == '') {
                this.$axios({
                    url: 'addBuyCar',
                    method: 'post',
                    data: {
                        userId: this.userId,
                        number: this.qty,
                        pid: this.product.id
                    },
                    headers: {
                        'content-type': 'application/json'
                    }
                }).then(rs => {
                    if (rs.data.code == 5200 || rs.data.coe == '5200') {
                        alert('添加成功！')
                    } else {
                        alert('添加失败！')
                    }
                })
            } else {
                console.log(this.buyCar.product.stock)
                if (this.buyCar.number + this.qty > this.product.stock) {
                    alert('库存不足！')
                    return
                }

                this.$axios({
                    url: 'updateBuyCar',
                    method: 'post',
                    data: {
                        id: this.buyCar.id,
                        number: this.buyCar.number + this.qty
                    },
                    headers: { 'content-type': 'application/json' }
                }).then(rs => {
                    if (rs.data.code == 5200 || rs.data.code == '5200') {
                        alert('添加成功！')
                    } else {
                        alert('添加失败！')
                    }
                })
            }

        },

        getBuyCar() {
            this.$axios({
                url: 'addBuyCarNum',
                method: 'get',
                params: { userId: this.userId, pid: this.product.id }
            }).then(rs => {
                if (rs.data.code == 5200 || rs.data.code == '5200') {
                    this.buyCar = rs.data.buyCar
                    this.addToBuyCar()
                } else {
                    alert('添加失败！')
                }
            })
        },

        checkIsCollect() {
            this.$axios({
                url: 'checkIsCollect',
                params: { pid: this.product.id, userId: this.userId }
            }).then(rs => {
                if (rs.data.code == 5200 || rs.data.code == '5200') {
                    this.addCollect()
                } else {
                    alert('该商品已经被收藏！')
                }
            })
        }
    },
    mounted() {
        this.userId = window.sessionStorage.getItem('userId')
        this.id = Number(this.$route.query.id)
        console.log(this.id)
        this.getProduct()
    }
}
</script>

<style scoped>
.product-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    background-color: #f5f5f5;
}

.product-card {
    display: flex;
    background-color: white;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 30px;
    max-width: 900px;
    width: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.left {
    flex: 0 0 40%;
    margin-right: 30px;
}

.left img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}

.right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.title {
    margin-left: 0;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

.price {
    font-size: 20px;
    color: #e74c3c;
    margin-bottom: 15px;
    font-weight: bold;
}

.desc {
    font-size: 16px;
    color: #666;
    margin-left: 0;
    margin-bottom: 20px;
    line-height: 1.5;
}

.quantity-box {
    display: flex;
    align-items: center;
    margin-left: 0;
    margin-bottom: 25px;
}

.quantity-box button {
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    background-color: white;
    cursor: pointer;
    font-size: 16px;

}

.quantity-box input {
    width: 50px;
    height: 30px;
    text-align: center;
    border: 1px solid #ddd;
    margin: 0 5px;
}

.stock-tips {
    margin-left: 10px;
    color: #948c8c;
    font-size: 14px;
}

.action-bar {
    display: flex;
    margin-left: 0;
    gap: 15px;
}

.btn-fav,
.btn-cart {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

.btn-fav {
    background-color: rgb(243, 239, 239);
    color: black;
}

.btn-fav:hover {
    color: white;
    background-color: #e74c3c;
}

.btn-cart {
    background-color: rgb(243, 239, 239);
    color: black;
}

.btn-cart:hover {
    color: white;
    background-color: #e74c3c;
}
</style>